<template>
    <div v-loading="loading" style="width: 100%;">

        <div class="tableBox">
            <el-table
                    :data="list"
                    border
                    style="width: 1591px">

                <el-table-column
                        align="center"
                        prop="m_company"
                        label="发货厂家"
                        width="280">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="p_company"
                        label="上级厂家"
                        width="280">
                </el-table-column>

                <el-table-column
                        width="180"
                        align="center"
                        prop="turnover_no"
                        label="订单号">
                </el-table-column>

                <el-table-column
                        width="110"
                        align="center"
                        prop="number"
                        label="购买数量">
                </el-table-column>

                <el-table-column
                        width="130"
                        align="center"
                        prop="total_price"
                        label="购买价格">
                </el-table-column>

                <el-table-column
                        width="200"
                        align="center"
                        prop="create_time"
                        label="购买时间">
                </el-table-column>

                <el-table-column
                        width="120"
                        align="center"
                        prop="status"
                        label="订单状态">
                    <template slot-scope="scope">
                        <span>
                            {{
                                scope.row.status === 0 ?
                                    '待审核'
                                : scope.row.status === 1 ?
                                    '待发货'
                                : scope.row.status === 2 ?
                                    '已发货'
                                : scope.row.status === 3 ?
                                    '已完成'
                                :   '审核不通过'
                            }}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column align="center" width="290">
                    <template slot-scope="scope">
                        <el-button size="mini" type="info" @click="handleOrderInfo(scope.row.id)">订单详情</el-button>
                        <el-button
                                icon="el-icon-check"
                                size="mini"
                                type="success"
                                @click="handleOrderStatus(scope.row.id,1)"
                        >通过</el-button>
                        <el-button
                                icon="el-icon-close"
                                size="mini"
                                type="danger"
                                @click="handleOrderStatus(scope.row.id,4)"
                        >驳回</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div class="pagination">
            <el-pagination
                    v-if="paginationVisible"
                    :page-size="20"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'orderEnter',
        data(){
            return{
                list: [],
                total: 0,
                loading: false,
                status: '',
                paginationVisible: true
            }
        },

        methods:{
            defaultData(page){
                this.loading = true;
                this.$http.get('agent/turnover/list',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        status: 0,
                        page: page
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;

                        if (response.data.data.pagination.total <= 20){
                            this.paginationVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                })
            },

            //查看订单详情
            handleOrderInfo(id){
                this.$router.push({name: 'orderInfo', query: {id: id, type: 'check'} })
            },

            //审核订单
            handleOrderStatus(id,status){
                this.loading = true;
                this.$http.get('/agent/turnover/status',{
                    params:{
                        token: localStorage.getItem('user_token'),
                        id: id,
                        status: status
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.$message.success('审核成功');
                        this.defaultData();
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                })
            }


        },

        mounted() {
            this.defaultData();
        }

    }
</script>

<style>
    .tableBox{
        margin-left: 60px;
        margin-top: 50px;
    }
    .pagination{
        margin-top: 50px;
        text-align: center;
    }
</style>